import React from 'react';
import { Layout, Menu, theme, Button } from 'antd';
import { 
  FunctionOutlined, 
  CloudServerOutlined,
  ShopOutlined
} from '@ant-design/icons';
import { Outlet, useNavigate, useLocation } from 'react-router-dom';

const { Header, Content, Footer, Sider } = Layout;

const App = () => {
  const navigate = useNavigate();
  const location = useLocation();
  
  const {
    token: { colorBgContainer },
  } = theme.useToken();

  const handleLogout = () => {
    localStorage.removeItem('token');
    localStorage.removeItem('user');
    navigate('/login');
  };

  // 根据当前路径确定选中的菜单项
  const getSelectedKey = () => {
    if (location.pathname.startsWith('/functions')) return 'functions';
    if (location.pathname.startsWith('/function-store')) return 'function-store';
    if (location.pathname.startsWith('/instances')) return 'instances';
    return 'functions';
  };

  return (
    <Layout style={{ minHeight: '100vh' }}>

      <Sider
        breakpoint="lg"
        collapsedWidth="0"
      >
        <div className="logo" style={{ 
          height: '32px', 
          margin: '16px', 
          background: 'rgba(255, 255, 255, 0.2)',
          color: 'white',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          borderRadius: '6px'
        }}>
          serverless函数管理系统
        </div>
        <Menu 
          theme="dark" 
          mode="inline" 
          selectedKeys={[getSelectedKey()]}
          items={[
            {
              key: 'functions',
              icon: <FunctionOutlined />,
              label: '函数管理',
              onClick: () => navigate('/functions'),
            },
            {
              key: 'function-store',
              icon: <ShopOutlined />,
              label: '函数商店',
              onClick: () => navigate('/function-store'),
            },
            {
              key: 'instances',
              icon: <CloudServerOutlined />,
              label: '实例管理',
              onClick: () => navigate('/instances'),
            },
          ]}
        />
      </Sider>
      <Layout>
        <Header style={{ 
          padding: '0 24px',
          background: colorBgContainer,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between'
        }}>
          <div></div>
          <Button onClick={handleLogout}>
            退出登录
          </Button>
        </Header>
        <Content style={{ margin: '24px 16px 0' }}>
          <div style={{ 
            padding: 24, 
            minHeight: 360, 
            background: colorBgContainer 
          }}>
            <Outlet />
          </div>
        </Content>
        <Footer style={{ textAlign: 'center' }}>
          serverless函数管理系统 ©2023
        </Footer>
      </Layout>
    </Layout>
  );
};

export default App;